<template>
	<div>
		<NavigationBar ref="navigationBar" title-text="首页" clear-height background-color="transparent" :is-show-button="false" />
		<Message ref="message" />
		<Loading ref="loading" fullscreen />
		<div class="cover-container w-full h-280rpx absolute top-0 left-0" :style="{ height: `calc(${navigationHeight}px + 340rpx)` }">
			<image class="w-full h-full" src="/static/images/my-bg.jpg" mode="aspectFill" />
		</div>
		<div class="index-container w-full h-screen flex-column pt-160rpx">
			<div class="w-full min-h-90vh flex-column bg-hex-f4f4f5 overflow-x-hidden">
				<div class="w-full h-400rpx">
					<u-swiper :list="list" height="400" :effect3d="true"></u-swiper>
				</div>
				<div class="w-full flex items-center justify-around text-28rpx p-20rpx mt-20rpx">
					<div class="bor flex-column items-center p-20rpx bg-white" @click="gotoHospital">
						<div><i class="far fa-address-card" /></div>
						<div>医院信息</div>
					</div>
					<div class="bor flex-column items-center p-20rpx bg-white" @click="gotoDepart">
						<div><i class="far fa-map" /></div>
						<div>科室信息</div>
					</div>
					<div class="bor flex-column items-center p-20rpx bg-white" @click="gotoServe">
						<div><i class="far fa-address-book" /></div>
						<div>上门服务</div>
					</div>
				</div>
				<div class="w-full h-200rpx mt-30rpx">
					<image class="w-full h-full" src="/static/images/my-bg.jpg" mode="aspectFill" />
				</div>
				<div class="w-full p-10rpx text-primary">医院资讯</div>
				<div class="w-full flex flex-wrap items-center justify-around mt-10rpx">
                    <div class="bg-white w-350rpx p-20rpx mt-20rpx bor" v-for="item in inquiriesList" :key="item.id" @click="gotoDetail(item.id)">
						<div class="text-28rpx pb-20rpx title-text">{{item.title}}</div>
						<div class="w-full flex items-center justify-between text-hex-606266">
							<div class="text-28rpx w-150rpx title-text">{{item.synopsis}}</div>
							<div>{{moment(item.time).format("YYYY-MM-DD")}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import moment from 'moment'; 
import { ref } from 'vue';
import Message from '@/components/message/src/message.vue';
import type { MessageMethod } from '@/components/message';
import Loading from '@/components/loading/src/loading.vue';
import type { LoadingMethod } from '@/components/loading';
import NavigationBar from '@/components/navigation-bar/src/navigation-bar.vue';
import type { NavigationBarMethod } from '@/components/navigation-bar';
import { useSystemStore, useUserStore } from '@/store';
  import {gotoPage} from '@/common/utils'
import { systemApi } from '@/service/api';

const message = ref<InstanceType<typeof Message> & MessageMethod>(null);
const loading = ref<InstanceType<typeof Loading> & LoadingMethod>(null);
const navigationBar = ref<InstanceType<typeof NavigationBar & NavigationBarMethod>>(null);

const { navigationHeight } = useSystemStore();
console.log(navigationHeight);
const list = ref([
	{
		image: '/static/images/my-bg.jpg',
		title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方',
	},
]);
// 资讯数据
const inquiriesList =ref<any>([])
// 跳转页面
const gotoHospital = ()=>{
	gotoPage('/pages/hospital/hospital')
}
const gotoDepart = ()=>{
	gotoPage('/pages/registered/registered', 'switchTab')
}
const gotoServe = ()=>{
	gotoPage('/pages/serve/serve', 'switchTab')
}
// 获取轮播图
const getImageList =async ()=>{
  await systemApi.getCarousel().then((res)=>{
	console.log(res.data?.data.result); 
	list.value=res.data?.data.result
  }).catch((err)=>{
	console.log(err);
  })
}
// 获取咨讯
const getinfo =async ()=>{
   await systemApi.getInquiriesinfo({}).then((res)=>{
	console.log(res);
	inquiriesList.value=res.data?.data.result
   }).catch((err)=>{
	console.log(err);
   })
}
const gotoDetail = useThrottleFn(
	(id: string): void => {
		gotoPage(`/pages/inquiries/inquiries?id=${id}`);
	},
	1000,
	false,
	true
)
onLoad(()=>{
	getImageList()
	getinfo()
})
onShow(() => {
	// console.log('12');
});
</script>

<style scoped lang="scss">
@import 'index';
</style>
